<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请教室</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script src="../static/layui/layui.js" charset="utf-8"></script>
    <script src="../static/layui_extends/selectN.js" type="text/javascript"></script>
    <script src="../static/layui_extends/selectM.js" type="text/javascript"></script>
    <script type="text/javascript" src="../static/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-bg-gray" style="padding: 30px;">
        <span style="font-size: 20px; color: black">申请教室:&nbsp;</span>
        <div class="layui-bg-gray" style="padding: 30px;">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">教室编号:&nbsp;</label>
                        <div class="layui-input-inline">
                            <select name="classroomID" lay-verify="required" lay-search="" id="classroomID">
                                <option value="">直接选择或搜索选择教室ID</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">选择日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="date" lay-verify="required|date" id="date" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择节次:&nbsp;</label>
                    <div class="layui-input-block" id="sectionNumber">

                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">申请用途:&nbsp;</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" lay-verify="required" name="description"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:center;">
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="confirm">确认申请</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
    getClassroomID();
    function getClassroomID(){
        $.ajax({
            url: 'http://localhost:8080/studentApplicationClassroom/queryClassroomID',
            type: 'post',
            dataType: 'json',
            success: function (data){
                // console.log(data);
                for (var i = 0; i < data.length; i++ ){
                    $('#classroomID').append("<option value="+data[i]+">"+data[i]+"</option>")
                }
                //重新渲染表单
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });
            },
            error: function (msg){
                alert("ajax连接异常："+msg);
            }
        })
    }

    var sectionData = [
        //设置status=0表示此选项禁选？？？待确定
        //{"id":13, "name":"第13节", "status":0}
        {"id":1, "name":"第一节"}
        ,{"id":2, "name":"第二节"}
        ,{"id":3, "name":"第三节"}
        ,{"id":4, "name":"第四节"}
        ,{"id":5, "name":"第五节"}
        ,{"id":6, "name":"第六节"}
        ,{"id":7, "name":"第七节"}
        ,{"id":8, "name":"第八节"}
        ,{"id":9, "name":"第九节"}
        ,{"id":10, "name":"第十节"}
        ,{"id":11, "name":"第十一节"}
        ,{"id":12, "name":"第十二节"}
    ];

    layui.use('selectM', layui.factory('selectM'));

    layui.config({
       base : './'
    // }).extend({
    //     //selectN : './layui_extends/selectN',
    //     selectM : './layui_extends/selectM',
    }).use(['layer', 'form', 'jquery', 'selectM'], function (){
        $ = layui.jquery;
        var form = layui.form
        //,selectN = layui.selectN
        ,selectM = layui.selectM;


        //多选标签-所有配置
        var tagIns = selectM({
            //元素容器【必填】
            elem: '#sectionNumber'

            //候选数据【必填】
            ,data: sectionData

            //默认值
            //,selected: [12,17]

            //最多选中个数，默认为5
            ,max: 12

            //input的name 不设置与选择器相同（去#.）
            ,name: 'selectedSection'

            //表单验证，同lay-verify
            ,verify: 'required'

            //值得分隔符
            ,delimiter: ','

            //候选项数据的键名
            ,field: {idName:'id', titleName:'name'}
        });

        $('form').find(':reset').click(function (){
           $('form')[0].reset();
           tagIns.set();
           return false;
        });

        // form.on('submit(confirm)', function (data){
        //     console.log('tagIns 当前选中的值名: ', tagIns.selected);
        //     console.log('tagIns 当前选中的值: ', tagIns.values);
        //     console.log('tagIns 当前选中的名: ', tagIns.names);
        //
        //     console.log('');
        //
        //     var formData = data.field;
        //     console.log('表单对象：',formData);
        // });
    });

    layui.use(['form', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });

        form.verify({
            date: function (value) {
                s = value.replace(/-/g,"/");
                var d = new Date(s);
                if(d < Date.now()) {
                    return '您不能选择当前时间及之前的日期，请选择正确日期！';
                }
            }
        });
        var isSubmit = false;
        //监听提交
        form.on('submit(confirm)', function(data){
            insertStudentApplicationClassroom(data.field);
            layer.alert("教室申请发送成功", {
                title: ''
            })
            return false;
        });

    });

    var isSend = false;

    function insertStudentApplicationClassroom(data) {
        if(isSend) return;
        isSend = true;
        $.ajax({
            type: "post",
            url: '/studentApplicationClassroom/insertStudentApplicationClassroom',
            data: {
                'classroomID': data.classroomID,
                'date': data.date,
                'selectedSection': data.selectedSection,
                'description': data.description
            },
            async: true,
            traditional: true, //是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true!!!!!!
            dataType: "json",
            success: function (returnDate){
                isSend = false;
                // console.log(returnDate);
                // alert("ajax链接成功");
            },
            error: function (){
                isSend = false;
                alert("ajax链接异常")
            }
        });

    }

</script>
</body>
</html>